<template>
  <div>
    <el-button type="primary" size="mini" @click="visible = !visible">新增菜单</el-button>
    <el-dialog
      title="编辑菜单"
      :visible.sync="visible"
      width="70%"
      @close=""
    >
      <el-form ref="form" :model="form" label-width="130px" :inline="false" size="mini">
        <el-form-item label="菜单类型">
          <el-radio v-model="form.type" :label="0" @change="">顶级目录</el-radio>
          <el-radio v-model="form.type" :label="1" @change="">菜单</el-radio>
          <el-radio v-model="form.type" :label="2" @change="">按钮</el-radio>
        </el-form-item>
        <el-form-item v-if="form.type != 0" :label="form.type == 1 ?'上级菜单' : '所在页面'">
          <el-cascader
            v-model="form.pid"
            :options="list"
            :props="{ checkStrictly: true ,label:'title',value:'id'}"
            clearable
          />

        </el-form-item>
        <el-form-item v-if="form.type != 0" label="层级">
          <el-input v-model="form.level" />
        </el-form-item>
        <el-form-item v-if="form.type != 2" label="路由名称">

          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item v-if="form.type != 2" label="路径">
          <el-input v-model="form.path" />
        </el-form-item>
        <el-form-item v-if="form.type != 2" label="组件路径">
          <el-input v-model="form.component" />
        </el-form-item>
        <el-form-item v-if="form.type != 2" label="重定向">
          <el-input v-model="form.redirect" />
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="form.sort" />
        </el-form-item>
        <el-form-item v-if="form.type == 2" label="按钮名称">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item v-if="form.type == 2" label="权限标识">
          <el-input v-model="form.permissionValue" />
        </el-form-item>
        <el-form-item v-if="form.type != 2" label="是否隐藏">
          <el-radio v-model="form.hidden" :label="false" @change="">否</el-radio>
          <el-radio v-model="form.hidden" :label="true" @change="">是</el-radio>

        </el-form-item>
        <el-form-item v-if="form.type != 2" label="是否展开">
          <el-radio v-model="form.alwaysShow" :label="false" @change="">否</el-radio>
          <el-radio v-model="form.alwaysShow" :label="true" @change="">是</el-radio>

        </el-form-item>
        <el-form-item v-if="form.type != 2" label="meta属性">
          <div v-for="item in form.meta">
            <el-row :gutter="20">
              <el-col :span="6" :offset="0">
                <el-input v-model="item.key" />

              </el-col>
              <el-col :span="6" :offset="0" style="display: flex; align-items:center">
                <el-input v-model="item.value" /> <i class="el-icon-plus" @click="add" />
              </el-col>
            </el-row>

          </div>
        </el-form-item>

      </el-form>

      <span slot="footer">
        <el-button @click="visible = false">Cancel</el-button>
        <el-button type="primary" @click="onConfirm">新增</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import {
  save
} from '@/api/auth/permission/index.js'
import {
  findAllPermissions
} from '@/api/auth/roles/index'
export default {
  data() {
    return {
      visible: false,
      list: [],
      form: {
        // 控制侧边栏是否可以展开关闭
        'alwaysShow': true,
        'children': [
        ],
        'component': '@/layout/index.vue',
        'createTime': '',
        'hidden': false,
        'icon': '',
        'id': '',
        'isDeleted': '',
        'isSelect': '',
        'level': 0,
        'meta': [
          {
            key: 'title',
            value: 'test'
          },
          {
            key: 'icon',
            value: 'dashboard'
          }
        ],
        'modifyTime': '',
        'name': 'test',
        'path': 'test',
        'permissionValue': '',
        'pid': 0,
        'redirect': '',
        'sort': '123',
        'status': '',
        'title': '',
        'type': ''
      }
    }
  },
  computed: {

  },
  created() {
    findAllPermissions()
      .then(res => {
        console.log(res)
        this.list = res.data.menus
        this.getAllId(res.data.menus)
      })
  },
  mounted() {

  },
  methods: {
    getAllId(val) { // 遍历数据  拿到数组每一项的id  存放到allIds
      if (!Array.isArray(val)) {
        return
      }
      val.forEach(ele => {
        if (ele.type == 2) {
          ele.disabled = true
          delete ele.children
        }
        this.getAllId(ele.children)
      })
    },
    add() {
      this.form.meta.push({
        key: '',
        value: ''
      })
    },
    onConfirm() {
      var params = JSON.parse(JSON.stringify(this.form))
      var obj = {}
      params.pid = params.type == 0 ? 0 : params.pid[params.pid.length - 1]
      params.icon = params.meta[1].value
      params.title = params.meta[0].value
      params.type = params.type == 0 ? 1 : params.type

      params.meta.forEach(el => {
        obj[el.key] = el.value
      })
      params.meta = JSON.stringify(obj)
      save(params)
    }
  }
}
</script>

<style scoped lang="scss">

</style>
